<template>
  <div :class="['PaySelectView',showOrHideCls]" :style="{'z-index':z_index}" :id="clsid">
    <div class="back"></div>
    <div class="view">
      <div class="item" style="background-color: #FF9B4F;top:1.25rem;" @click="itemClick(0)">29.9解锁详情</div>
      <div class="item" style="background-color: #E35345;top:1.85rem;display: none;" @click="itemClick(1)">
        <span style="color: #FFF668;border-bottom:0.01rem solid #FFF668;">99元</span>解锁9大项详情
      </div>
      <div class="close" @click="closeClick()"></div>
    </div>
  </div>
</template>

<style scoped>
.PaySelectView{

}
.back{
  position: absolute;background-color: #000000;opacity: 0;width: 7.5rem;height: 18rem;overflow-y:hidden;
  overflow-x: hidden;
}
.view{
  position: fixed;bottom:5rem; width: 5.5rem;height: 3.5rem;background-color: #F2F2F2;left: 0.9rem;border-radius: 0.25rem;border-style:solid;
  border-width:5px;
}
.close{
  position: absolute;background-image: url("../../assets/img/life/close.png");width: 0.28rem;height: 0.28rem;right: 0.2rem;top:0.2rem;
}

.item{
  position: absolute;width: 4.2rem;height: 0.9rem;color: #FFECE0;left: 0.6rem;border-radius: 0.1rem;font-size: 0.32rem;font-weight: 600;line-height: 0.9rem;
}
</style>
<script setup>
import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";
import {ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';
let store = useStore();
let clsid=winApp.getClsId();
let router = useRouter();
/*组件挂载完成后执行的函数；*/
onMounted(() => {

  console.log("PaySelectView onMounted  付费选择");

});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  // winApp.deleteNotification(clsid);
  console.log("PaySelectView onUnmounted  卸载组件实例后  ",clsid);
});

let z_index=ref(0);
//挂载状态
let showView_status=computed(()=>{return store.state.view.paySelectView;});
//显示隐藏class
let showOrHideCls=ref('');
watch(showView_status,(newValue,oldValue)=>{
  console.log("ResultView watch  shopView_status ",newValue);
  if(newValue===Enum.view_status_1){//显示
    showOrHideCls.value='viewShow';
    store.state.view.viewZindex++;
    z_index.value=store.state.view.viewZindex;
  }
  if(newValue===Enum.view_status_2){//隐藏
    showOrHideCls.value='viewHide';
  }
});


function closeClick(){
  store.state.view.paySelectView=Enum.view_status_2;
}
function itemClick(type){
  console.log("PaySelectView itemClick");
  let data={
    id:store.state.lifeRecId,
    account:store.state.userId,
  }
  $.ajax({
    url: store.state.data_url+'/g_mingshu_unlock',
    type: 'GET',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: data,
    success: function(data) {
      console.log("PaySelectView getDatainit:",data.status,data);
      if(data.tips!=null){
        winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,data.tips);
      }
      if (data.status==0) {
        data.content.status=data.status;
        winApp.sendNotification(MEventCMD.CMD_PAY_RS, data.content);
      }
      closeClick();
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");
      winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'网络错误');
    }

  });
}
</script>



